<template>
  <div class="app-container">
    <el-form label-width="120px" style="width: 75%">
      <el-form-item label="用户名">
        <el-input v-model="user.username" @input="isUserNameEmpty"/> <span style="color: red">{{ nameError }}</span>
      </el-form-item>

      <div v-if="$route.params === undefined || $route.params.id === undefined">

        <el-form-item label="密码">
          <el-input v-model="user.password" type="password"/>
        </el-form-item>

        <el-form-item label="确认密码">
          <el-input v-model="confirmPassword" type="password" @input="isPwdSame"/> <span style="color: red">{{ pwdError }}</span>
        </el-form-item>

      </div>

      <el-form-item label="Email">
        <el-input v-model="user.email" @input="isEmail"/> <span style="color: red">{{ emailError }}</span>
      </el-form-item>

      <el-form-item label="TEL">
        <el-input v-model="user.tel" @input="isTel"/> <span style="color: red">{{ telError }}</span>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
import user from '@/api/hr/user'
export default {
  data() {
    return {
      confirmPassword: '',
      emailError: '',
      telError: '',
      pwdError: '',
      nameError: '',
      user: { role: 1 },
      roles: [{
        id: 0,
        name: '管理员'
      }, {
        id: 1,
        name: '普通用户'
      }],
      saveBtnDisabled: false
    }
  },
  watch: {
    $route(to, from) {
      console.log('watch $route')
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.getInfo(id)
      }
    },
    getInfo(id) {
      user.getUser(id)
        .then(response => {
          this.user = response.data.user
        })
    },
    saveOrUpdate() {
      this.isTel()
      this.isEmail()
      user.role = 1
      if (!this.user.id) {
        this.isPwdSame()
        if (this.pwdError === '' && this.emailError === '' && this.telError === '') {
          this.saveUser()
        } else {
          alert('信息填写错误')
        }
      } else {
        if (this.pwdError === '' && this.emailError === '' && this.telError === '') {
          this.updateUser()
        } else {
          alert('信息填写错误')
        }
      }
    },
    updateUser() {
      user.updateUser(this.user)
        .then(response => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.$router.push({ path: '/user/table' })
        }).catch(response => {
          this.$message({
            type: 'error',
            message: response.data.message
          })
        })
    },
    saveUser() {
      user.addUser(this.user)
        .then(response => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.$router.push({ path: '/user/table' })
        }).catch(response => {
          this.$message({
            type: 'error',
            message: response.data.message
          })
        })
    },
    isEmail() {
      const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/
      // eslint-disable-next-line no-empty
      if (this.user.email === '' || this.user.email === undefined || this.user.email === null) {
      } else {
        if (!reg.test(this.user.email)) {
          this.emailError = '邮箱格式错误'
        } else {
          this.emailError = ''
        }
      }
    },
    isTel() {
      const reg = /^[1][3,4,5,7,8][0-9]{9}$/
      // eslint-disable-next-line no-empty
      if (this.user.tel === '' || this.user.tel === undefined || this.user.tel == null) {
      } else {
        if ((!reg.test(this.user.tel)) && this.user.tel !== '') {
          this.telError = '手机格式错误'
        } else {
          this.telError = ''
        }
      }
    },
    isPwdSame() {
      if (this.confirmPassword === this.user.password) {
        this.pwdError = ''
      } else {
        this.pwdError = '确认密码错误'
      }
    },
    isUserNameEmpty() {
      if (this.user.username === '') {
        this.nameError = '用户名不能为空'
      } else {
        this.nameError = ''
      }
    }
  }
}
</script>
